import { defineConfig } from 'vite'
// @ts-ignore
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import dts from 'vite-plugin-dts'
//@ts-ignore
import tailwindcss from '@tailwindcss/vite'
// import autoprefixer from "autoprefixer"
//@ts-ignore
// import postCssPxToRem from 'postcss-pxtorem'
import fs from 'fs'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    dts({
      outDir: 'dist',
      staticImport: true,
      insertTypesEntry: true
    }),
    tailwindcss()
  ],
  server: {
    host: '0.0.0.0',
    https: {
      key: fs.readFileSync('certs/localhost+1-key.pem'),
      cert: fs.readFileSync('certs/localhost+1.pem')
    }
  },
  css: {
    postcss: {
      plugins: [
        // postCssPxToRem({ // 自适应，px>rem转换，这个插件会和某些库冲突，如split-grid，最好不要使用
        //   rootValue: 16, // 1rem的大小
        //   propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
        // })
        // autoprefixer({
        //     overrideBrowserslist: [
        //         ">95%",
        //     ]
        // })
      ]
    }
  },
  resolve: {
    alias: {
      '@': resolve(__dirname, './packages')
    }
  },
  build: {
    lib: {
      entry: resolve(__dirname, 'packages/index.ts'),
      name: 'yklib',
      formats: ['es'],
      fileName: 'yklib'
    },
    sourcemap: true,
    rollupOptions: {
      external: ['vue'],  // 打包完成的文件把vue排除掉，即不包含vue库的打包
      output: {
        globals: {
          // umd构建模式需要，在你的配置中，你将 vue 设置为外部依赖，但没有指定它在全局环境中的变量名。因此，Vite会尝试猜测，
          // 通常它会使用模块的名称作为全局变量名，也就是vue.
          // 然而，为了避免潜在的混淆或错误，最好显式地指定外部模块的全局变量名。
          // 你可以在 rollupOptions.output 中添加 globals 配置来实现这一点
          vue: 'Vue'  // No name was provided for external module "vue" in "output.globals" – guessing "vue".
        }
      }
    }

  }

})
